﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>ExcelFormattingSample</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

    <link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

    <link href="../App.css" rel="stylesheet" type="text/css" />
    <script src="../App.js" type="text/javascript"></script>

    <link href="Home.css" rel="stylesheet" type="text/css" />
    <script src="Home.js" type="text/javascript"></script>
    <script src="chance.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Page content -->
    <div id="content-header">
        <div class="padding">
            <h3>Excel Table Formatting</h3>
        </div>
    </div>
    <div id="content-main">
        <div class="padding row">
            <div class="col-md-12">

                <h4>Create Sample Data</h4>
                <div class="form-group-sm">
                    <label for="numRows">Number of Rows:</label>
                    <input id="numRows" class="form-control" type="number" value="12" style="width:50px" />
                </div>
                <div class="form-group-sm">
                    <label for="dateFormat">Date Format:</label>
                    <select id="dateFormat" class="form-control">
                        <option>mm/dd/yy</option>
                        <option>mm/dd/yyyy</option>
                        <option>dd-mmm-yyyy</option>
                        <option>mm/dd/yyyy, dddd</option>
                    </select>
                </div>
                <div class="btn-group">
                    <button class="btn btn-default" id="AddBindings">Create Sample Table</button>
                    <button class="btn btn-default" id="AddData">Add Rows</button>
                </div>

            </div>
            <hr />
            <div class="col-md-12">
                <div class="form-group-sm">
                    <h4>Table Options</h4>
                    <select class="form-control" id="TableStyle"></select>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="filterButtonCheck"> Show Filter Button
                        </label>
                    </div>
                    <button class="btn btn-default" id="TableOptions">Table Options</button>
                </div>
            </div>
            <hr />
            <div class="col-md-12">
                <div class="form-group-sm">
                    <h4>Range Formatting</h4>
                    <p>Applies a red dash-dot border around the specified range with a double bottom border. Rows and columns start with zero.</p>
                    <table class="table-condensed table-striped">
                        <tr>
                            <th></th>
                            <th>Row</th>
                            <th>Col</th>
                        </tr>
                        <tr>
                            <td>Start</td>
                            <td><input class="form-control" type="number" id="rfStartRow" style="width:50px" /></td>
                            <td><input class="form-control" type="number" id="rfStartCol" style="width:50px" /></td>
                        </tr>
                        <tr>
                            <td>End</td>
                            <td><input class="form-control" type="number" id="rfEndRow" style="width:50px" /></td>
                            <td><input class="form-control" type="number" id="rfEndCol" style="width:50px" /></td>
                        </tr>
                    </table>
                    <button class="btn btn-default" id="CellFormatting">Cell Formatting</button>

                </div>
            </div>
            <hr />
            <div class="col-md-12">
                <div class="form-group-sm">
                    <h4>Reset</h4>
                    <div class="btn-group">
                        <button class="btn btn-default" id="ClearFormat">Clear Format</button>
                        <button class="btn btn-default" id="ClearData">Clear Data</button>
                    </div>
                </div>
            </div>
            <hr />

        </div>
    </div>

</body>
</html>